<template>
  <!-- ref="upload" 获取 dom元素 -->
  <!-- action 上传的地址 -- 必选 -->
  <!-- on-preview	点击文件列表中已上传的文件时的钩子 -->
  <!-- on-remove	文件列表移除文件时的钩子 -->
  <!-- file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] -->
  <!-- auto-upload	是否在选取文件后立即进行上传 -->
  <el-upload
    class="upload-demo"
    ref="upload"
    :action="url"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="successUpload"
    :file-list="fileList"
    :auto-upload="false"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button
      style="margin-left: 10px"
      size="small"
      type="success"
      @click="submitUpload"
      >上传到服务器</el-button
    >
  </el-upload>
</template>

<script>
import base from "../../api/base";
export default {
  data() {
    return {
      url: base.uploadUrl, //图片地址服务器
      fileList: [],
    };
  },
  methods: {
    //上传服务器
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 上传成功的函数
    successUpload(response, file, fileList) {
      console.log("上传成功", response, file, fileList);
      this.$message({
        message: "恭喜你成功上传图片",
        type: "success",
      });
      //把成功的数据接口 response 传递给父组件
      let imgUrl = base.host +'/'+ response.url.slice(7);
      this.$emit('sendImg',imgUrl)
    },
    //删除
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //点击文件的
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>

<style>
</style>